<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			.title {
				color: white;
				background-color: #0074D9;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<!-- react扩展库 -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<!-- jsx库,将jsx转jsx -->
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		class ComponentA extends React.Component{
			data = {
				title:'Hellow React',
			}
			// static propTypes = {//为prop接受的参数做校验
			//     list:PropType.Array
			// }
			static defaultProps = {//为prop接受的参数设置默认值
			    list:[{name:'默认名字',id:1}]
			}
			//点击事件回调函数
			fn = () =>{
				console.log(this.props.list)//this.props为外界传递进来的参数
			}
			//渲染虚拟DOM
			render (){
				//使用map循环
				let list = this.props.list.map((item,index)=>(<li key={item.id}>{item.name}</li>))
				return (
					<div>
						<h1 className="title" onClick={this.fn}>{this.data.title}</h1>
						<ul>{list}</ul>
					</div>
					)
			}
		}
		//参数
		let params = [{name:'小刘',id:1},{name:'小王',id:2},]
		ReactDOM.render(<ComponentA list={params}/>,document.getElementById('app'))
	</script>
</html>
